<template>
    <div>
        <div class="right-top">
            <div class="right-t">
                <div class="right-t-item" @click="showTitle=1" :class="showTitle===1?'active':''" v-if="route.path === '/practice/history'">
                    <span class="right-t-item-span">浏览历史</span>
                </div>
                <div class="right-t-item" @click="showTitle=2" :class="showTitle===2?'active':''" v-if="route.path === '/practice/shoucang' || route.path === '/practice/huancun'">
                    <span class="right-t-item-span">资源</span>
                </div>
                <div class="right-t-item" @click="showTitle=3" :class="showTitle===3?'active':''" v-if="route.path === '/practice/shoucang' || route.path === '/practice/huancun'">
                    <span class="right-t-item-span">视频课</span>
                </div>
                <div class="right-t-item" @click="showTitle=4" :class="showTitle===4?'active':''" v-if="route.path === '/practice/shoucang'">
                    <span class="right-t-item-span">线下课</span>
                </div>
                <div class="right-t-item" @click="showTitle=5" :class="showTitle===5?'active':''" v-if="route.path === '/practice/shoucang' || route.path === '/practice/huancun'">
                    <span class="right-t-item-span">直播课</span>
                </div>
            </div>
        </div>
        <div class="right-bom">
            <div class="right-b-t">
                <div class="right-b-t-left">
                    <div class="right-b-t-left-input">
                        <el-input class="right-b-t-left-input-it" icon="Search" placeholder="" size="default" clearable
                            @change="">
                            <template #prepend>
                                <el-button :icon="Search" />
                            </template>
                        </el-input>
                    </div>
                    <div class="right-b-t-left-right">
                        搜索
                    </div>
                </div>
                <div class="right-b-t-right" v-if="route.path !== '/practice/huancun'">
                    <span class="right-b-t-right-pl">批量删除</span>
                </div>
            </div>
            <div class="right-b-b">
                <div v-if="route.path === '/practice/history'">
                    <div class="right-b-b-item" >
                    <div class="right-b-b-item-left">
                        <div class="right-b-b-item-left-lf">
                            <img :style="{width: '169px',height:'101px'}">
                        </div>
                        <div class="right-b-b-item-left-rh">
                            <div>
                                <span></span>
                            </div>
                            <div>
                                <span style="font-size: 14px; color: rgb(125, 128, 144);">作品</span>
                            </div>
                            <div class="right-b-b-item-left-rh-bom">
                                <div class="right-b-b-item-left-rh-bom-t">
                               </div>
                                <span></span>
                            </div>
                        </div>
                    </div>
                    <div class="right-b-b-item-cen">
                        <span>昨天22:37</span>
                    </div>
                    <div class="right-b-b-item-right">
                        <span>删除</span>
                    </div>
                </div>
                </div>
                
                <div class="right-b-b-item" v-else>
                    <span>无更多内容</span>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Studio",
});
</script>
  
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router';
import {  ref } from "vue";

// 获取当前路由
const route = useRoute()

// 控制选择的标题样式
const showTitle = ref(2)

</script>
  
<style scoped lang="scss">
.active{
    border-bottom: 5px hotpink solid;
}
.right-top {
    width: 1020px;
    float: right;
    background: #fff;
    margin-bottom: 10px;

    .right-t {
        .right-t-item {
            float: left;
            padding: 28px 30px;
            color: #111;
            font-size: 14px;
            position: relative;

            .right-t-item-span {
                font-size: 14px;
                color: #111;
            }
        }
    }
}

.right-bom {
    width: 1020px;
    float: right;
    background: #fff;

    .right-b-t {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 40px 10px 31px;
        color: #111;
        font-size: 14px;

        .right-b-t-left {
            white-space: nowrap;
            padding-right: 30px;
            display: inline-block;

            .right-b-t-left-input {
                display: inline-block;
                font-size: 14px;
                width: 270px;

                .right-b-t-left-input-it {
                    height: 40px;
                }
            }

            .right-b-t-left-right {
                display: inline-block;
                background: #f5f7f9;
                border-radius: 4px;
                color: #7d8090;
                font-size: 14px;
                padding: 12px 17px;
                margin-left: 10px
            }
        }

        .right-b-t-right {
            display: flex;
            align-items: center;

            .right-b-t-right-pl {
                font-size: 14px;
            }
        }
    }

    .right-b-b {
        padding: 0 35px 0 22px;
        margin-bottom: 20px;
        min-height: 700px;
    }

    .right-b-b-item {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        border-bottom: #7d8090 1px solid;

        .right-b-b-item-left {
            width: 700px;
            padding: 8px;
            display: flex;
            justify-content: space-between;

            .right-b-b-item-left-lf {
                width: 169px;
                height: 101px;
            }

            .right-b-b-item-left-rh {
                width: 465px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                font-size: 16px;
                .right-b-b-item-left-rh-bom {
                    display: flex;
                    align-items: center;

                    .right-b-b-item-left-rh-bom-t {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                    }
                }
            }
        }

        .right-b-b-item-cen {
            width: 200px;
            display: flex;
            justify-content: flex-end;
        }

        .right-b-b-item-right {
            width: 120px;
            display: flex;
            justify-content: flex-end;
        }
    }
}
</style>